<template>
  <div class="bg-white rounded-lg shadow-lg p-6">
    <h2 class="text-2xl font-semibold text-gray-800 mb-6">{{ title }}</h2>
    
    <!-- 材料分类导航 -->
    <div class="flex flex-wrap gap-2 mb-6">
      <button v-for="category in categories" :key="category.id"
              @click="activeCategory = category.id"
              :class="[
                'px-4 py-2 rounded-full text-sm font-medium transition-colors',
                activeCategory === category.id 
                  ? 'bg-blue-500 text-white' 
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              ]">
        {{ category.name }}
      </button>
    </div>

    <!-- 扩展材料列表 -->
    <div class="space-y-4">
      <div v-for="material in filteredMaterials" :key="material.id"
           class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
        <div class="flex items-start justify-between">
          <div class="flex-1">
            <div class="flex items-center mb-2">
              <div class="flex items-center mr-3">
                <svg class="w-5 h-5 mr-2" :class="getIconColor(material.type)" fill="currentColor" viewBox="0 0 20 20">
                  <path v-if="material.type === 'article'" fill-rule="evenodd" 
                        d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" 
                        clip-rule="evenodd" />
                  <path v-else-if="material.type === 'video'" fill-rule="evenodd" 
                        d="M3 4a1 1 0 000 2v9a2 2 0 002 2h6a2 2 0 002-2V6a1 1 0 100-2H3zm6 2.5v7l4.5-3.5-4.5-3.5z" 
                        clip-rule="evenodd" />
                  <path v-else-if="material.type === 'github'" fill-rule="evenodd" 
                        d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" 
                        clip-rule="evenodd" />
                  <path v-else fill-rule="evenodd" 
                        d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" 
                        clip-rule="evenodd" />
                </svg>
                <h3 class="text-lg font-semibold text-gray-800">{{ material.title }}</h3>
              </div>
              <span :class="[
                'px-2 py-1 rounded-full text-xs font-medium',
                getCategoryColor(material.category)
              ]">
                {{ getCategoryName(material.category) }}
              </span>
            </div>
            
            <p class="text-gray-600 mb-3">{{ material.description }}</p>
            
            <!-- 标签 -->
            <div class="flex flex-wrap gap-2 mb-3">
              <span v-for="tag in material.tags" :key="tag"
                    class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded">
                {{ tag }}
              </span>
            </div>
            
            <!-- 元信息 -->
            <div class="flex items-center text-sm text-gray-500 space-x-4">
              <span v-if="material.author">作者：{{ material.author }}</span>
              <span v-if="material.publishDate">发布：{{ formatDate(material.publishDate) }}</span>
              <span v-if="material.readTime">阅读时间：{{ material.readTime }}</span>
              <span v-if="material.difficulty" :class="getDifficultyColor(material.difficulty)">
                难度：{{ material.difficulty }}
              </span>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="flex flex-col space-y-2 ml-4">
            <a :href="material.url" target="_blank" rel="noopener noreferrer"
               class="bg-blue-500 text-white px-4 py-2 rounded text-sm hover:bg-blue-600 transition-colors text-center">
              {{ getActionText(material.type) }}
            </a>
            <button @click="addToFavorites(material.id)"
                    :class="[
                      'px-4 py-2 rounded text-sm transition-colors',
                      material.isFavorite 
                        ? 'bg-yellow-100 text-yellow-800 border border-yellow-300' 
                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                    ]">
              {{ material.isFavorite ? '已收藏' : '收藏' }}
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 推荐资源 -->
    <div class="mt-8 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-4">推荐资源</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div v-for="resource in finalRecommendedResources" :key="resource.id"
             class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
          <div class="flex items-center mb-2">
            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
              <svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd" />
              </svg>
            </div>
            <h4 class="font-medium text-gray-800">{{ resource.title }}</h4>
          </div>
          <p class="text-sm text-gray-600 mb-3">{{ resource.description }}</p>
          <a :href="resource.url" target="_blank" rel="noopener noreferrer"
             class="text-blue-600 hover:text-blue-800 text-sm font-medium">
            查看资源 →
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// Props定义
const props = defineProps({
  title: {
    type: String,
    default: '扩展材料'
  },
  materials: {
    type: Array,
    default: () => []
  },
  recommendedResources: {
    type: Array,
    default: () => []
  }
})

// 分类数据
const categories = ref([
  { id: 'all', name: '全部' },
  { id: 'article', name: '技术文章' },
  { id: 'tutorial', name: '教程指南' },
  { id: 'tool', name: '开发工具' },
  { id: 'community', name: '社区资源' },
  { id: 'reference', name: '参考文档' }
])

const activeCategory = ref('all')

// 直接使用传入的materials
const materials = computed(() => {
  return props.materials
})



// 推荐资源：直接使用传入的recommendedResources
const finalRecommendedResources = computed(() => {
  return props.recommendedResources
})

// 计算属性
const filteredMaterials = computed(() => {
  if (activeCategory.value === 'all') {
    return materials.value
  }
  return materials.value.filter(material => material.category === activeCategory.value)
})

// 方法
const getIconColor = (type) => {
  const colorMap = {
    'article': 'text-blue-500',
    'video': 'text-red-500',
    'github': 'text-gray-800',
    'reference': 'text-green-500',
    'tool': 'text-purple-500'
  }
  return colorMap[type] || 'text-gray-500'
}

const getCategoryColor = (category) => {
  const colorMap = {
    'article': 'bg-blue-100 text-blue-800',
    'tutorial': 'bg-green-100 text-green-800',
    'tool': 'bg-purple-100 text-purple-800',
    'community': 'bg-orange-100 text-orange-800',
    'reference': 'bg-gray-100 text-gray-800'
  }
  return colorMap[category] || 'bg-gray-100 text-gray-800'
}

const getCategoryName = (category) => {
  const categoryMap = {
    'article': '技术文章',
    'tutorial': '教程指南',
    'tool': '开发工具',
    'community': '社区资源',
    'reference': '参考文档'
  }
  return categoryMap[category] || category
}

const getDifficultyColor = (difficulty) => {
  const colorMap = {
    '初级': 'text-green-600',
    '中级': 'text-yellow-600',
    '高级': 'text-red-600',
    '全级别': 'text-blue-600'
  }
  return colorMap[difficulty] || 'text-gray-600'
}

const getActionText = (type) => {
  const actionMap = {
    'article': '阅读文章',
    'video': '观看视频',
    'github': '查看项目',
    'reference': '查看文档',
    'tool': '使用工具'
  }
  return actionMap[type] || '查看资源'
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('zh-CN')
}

const addToFavorites = (id) => {
  const material = materials.value.find(m => m.id === id)
  if (material) {
    material.isFavorite = !material.isFavorite
  }
}
</script>